<template>
	<view class="an-body relative">
		<view class="topnavfeer w100">	
			<!-- <view class="an-index-grid tablist w100 tCenter p5 bg_white">
				<view class="tabshow w50" @click="tabfun('1')">
					<span class='pB5' :class="showtype=='1'?'on':''">预约</span>
				</view>
				<view class="tabshow w50 " @click="tabfun('2')">			
					<view class="borderL2">
						<span class='pB5 ' :class="showtype=='2'?'on':''">到访</span>
					</view>				
				</view>
			</view> -->
			<view class="times list fixed">
				<view class="an-index-grid2 tCenter p5 pL10 pR10 bodybg">
					<view class="tabshow pR5" @click="choosedate('start')">
						<span class='borderr8 p2 pL5 pR5 borderall'>{{startdate?startdate:'预约开始'}} <uni-icons class="pL5" type="arrowdown" size="10"></uni-icons></span>
					</view>
					-
					<view class="tabshow pL5">			
						<view class="" @click="choosedate('end')">
							<span class=' borderr8 p2 pL5 pR5 borderall'>{{enddate?enddate:'预约结束'}} <uni-icons class="pL5" type="arrowdown" size="10"></uni-icons></span>
						</view>				
					</view>
					<view class="pL5" @click="chooseall()">
						<span class=' borderr8 p2 pL5 pR5 borderall'>全部</span>
					</view>
				</view>
			</view>
		</view>
		
		<view class="an-top-bg" style="background: #fbf9fe;">			
			<!-- 用户信息 -->
			 <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" >
				 <view class="pB50" style="padding-top: 90upx;">				 	
				
				 <nodata v-if="getlist.length==0"></nodata>
				 
					<view class="an-userInfo p10 borderb1" v-for="(item,index) in getlist">
						<!-- <view class="an-user">
							<image style="width: 100upx; height: 100upx; background-color: #eeeeee;" mode="aspectFit" :src="item.app_personimg | personimg" @error="imageError"></image>
						</view> -->
						<view class="an-user-image3">
							<view class="myheaadurl"><image mode="aspectFill"  :src="item.app_personimg | personimg" @error="imageError"></view>
							
						
							</image>
						</view>
						
						<view class="an-user-text1">	
							<view style="color: black;">
								
								<p>{{showtext}}公司：{{item.app_company_name?item.app_company_name:'-'}}</p>
								<p>{{showtext}}部门：{{item.app_address?item.app_address:'-'}}</p>
								<p>{{showtext2}}人员：{{item.app_user_name?item.app_user_name:'-'}}</p>
								<p>电话号码：{{item.app_mobile?item.app_mobile:'-'}}</p>
								<p>到访时间：{{timestampTime(item.app_visittime)}}</p>
							</view>
							<view class="cc-view" >
								<button class="cc2" @click="details(index)">查看详情</button>
								
								<button class="cc" v-if="item.m_status==13"  @click="goanswer(item)" >去答题</button> 
								<button class="cc" v-if="item.m_status==6 ||item.m_status==0|| item.m_status==7" @click="gomeeting_code(item)" >出示二维码</button> 
								<!-- {{checkstatus(index)}} -->
								<i class="cc-icon"><i class="cc-icon-del"></i><text :class="[checkstatusclass(index) ? 'cc-success-status' : 'cc-wrong-status']">{{item.m_tips}}</text></i>
							</view>
						</view>
						
						
					</view>
			</view>
			</mescroll-uni>
		</view>

		<!-- <view class="btnapprow bg_white">
			<view class="btn-row"><button type="primary" class="primary " @click="addyaoqing()">申请拜访</button></view>
		</view> -->
		
		<w-picker
			:visible.sync="date1visible"
			mode="date" 
			startYear="2020" 
			endYear="2030"
			value="showyearin"
			:current="true"
			fields="day"
			@confirm="onConfirm($event,'date')"
			@cancel="onCancel"
			:disabled-after="false"
			ref="date" 
		></w-picker>
		
		
		<!-- 底部导航 -->
		<footernav :pagePath='showstate'></footernav>
		<!-- 加载动画 -->
		<loading v-if="!isloading()"></loading>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { hostRoot } from '@/common/util.js';
import {getlist} from '../../common/api/user.js'; //引进requst方法
import {meetinglist} from '@/common/api/pool.js'
import {isToday} from '@/common/common.js' /*工具类*/
import defaultImg from '@/static/img/userImg.jpg';
import {userinfo} from '@/common/api/user.js'; 
import wPicker from '@/components/w-picker/w-picker.vue';
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import {timestampToTime} from '@/common/common.js'
const icoList = [
	{
		id: 1,
		ico: 'icon-icon-test7',
		text: '文章管理',
		color: 'color1'
	},
	{
		id: 2,
		ico: 'icon-icon-test3',
		text: '留言管理',
		color: 'color2'
	},
	{
		id: 3,
		ico: 'icon-icon-test6',
		text: '打卡管理',
		color: 'color3'
	},
	{
		id: 4,
		ico: 'icon-wode',
		text: '用户管理',
		color: 'color4'
	}
];
export default {
	mixins: [MescrollMixin], // 使用mixin
	computed: {
		...mapState(['hasLogin', 'forcedLogin', 'userInfo'])
	},
	components: {
		wPicker
	},
	data() {
		return {
			isstatusclass:true,
			date1visible:false,
			userinfo:[],
			showtext2:'',
			showtext:'',
			showstate:'myyuyue',
			userSrc: defaultImg,
			grids: [],
			page:0,
			pagesize:10,
			getlist:[],
			downOption:{
				auto: false,
				page:{
					size:10
				}
			},
			upOption:{
				auto:false
			},
			requestchanger:true,
			count:0,
			needpage:0,
			member_frequency:0,
			showtype:"1",
			datetype:'',
			vis_state:"no",
			date_t1:"",
			date_t2:"",
			choosetype:'1',
		};
	},
	onLoad(event) {
		var  date = new Date();//时间戳为10位需*1000，时间戳为13位的话不需乘1000			 
		var Y = date.getFullYear() + '-';			 
		var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';			 
		var D = (date.getDate() < 10 ? '0'+(date.getDate()) : date.getDate()) + ' ';
		// this.enddate=Y+M+D;
		// this.startdate=Y+M+D;
		// this.enddate=Y+M+D;
		// this.startdate=Y+M+D;
		// var enddate1 = new Date(this.enddate);
		// var enddate = enddate1.getTime();
		
		// var startdate1 = new Date(this.startdate);
		// var startdate = startdate1.getTime();
		if(event.type=='2'){
			this.vis_state='do';
			this.choosetype='1';
			this.showstate='myyuyue1';
			uni.setNavigationBarTitle({
			　　title:'我被邀请'
			})
			this.showtext='邀请';
			this.showtext2='邀请';
			
		}else{
			this.vis_state='no';
			this.choosetype='2';
			uni.setNavigationBarTitle({
			　　title:'我的预约'
			})
			this.showtext='到访';			
			this.showtext2='受访';
		}
		
		
		var enddate = '';
		
		var startdate = '';
		
		// this.userSrc = hostRoot + 'uploads/' + this.userInfo.photoUrl;
		meetinglist({
			yueType:'vister',
			offset:this.page,
			length:this.pagesize,
			vis_state:this.vis_state,
			app_type:this.choosetype,
			date_t1:startdate,
			date_t2:enddate,
		}).then(res=>{
			console.log(res)
			this.getlist=res.data.data;
			this.count = res.data.count
			this.needpage = Math.ceil(this.count/this.pagesize)
			if(res.data.count <= this.pagesize){
				this.requestchanger = false
			}
		})
		
		uni.getStorage({
			key: 'userinfo',
			success: res => {
				this.userinfo = res.data
			}
		});
		
		userinfo({}).then(res=>{
			console.log(res)
			if(res.data.member.member_frequency){
				this.member_frequency=res.data.member.member_frequency;				
			}
				
			})
	},
	onShow() {
		//监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		this.grids = [];
		if (!this.hasLogin) {
			this.bindLogin();
		} else if (this.userInfo.grade == 2 || this.userInfo.grade == 3) {
			this.grids = icoList;
		} else {
			this.grids.push(icoList[0]);
			this.grids.push(icoList[1]);
		}
	},
	methods: {
		...mapMutations(['logout']),
		/*绑定css*/
		istodaycheck(str){
			return isToday(str)
		},
		onCancel(res,val){
		/*业务逻辑*/
		},
		onConfirm(res,val) {
			console.log(res)
			console.log(val);
			var datetype=this.datetype;
			//如果页面需要调用多个mode类型，可以根据mode处理结果渲染到哪里;
			switch (datetype) {
				case 'start':
					this.startdate = res.value
					break;
				case 'end':
					this.enddate = res.value
					break;
				
			}
			if(this.enddate&&this.startdate){
				var enddate1 = new Date(this.enddate);
				var enddate = enddate1.getTime();
				
				var startdate1 = new Date(this.startdate);
				var startdate = startdate1.getTime();
				if(startdate>enddate){
					uni.showToast({
						icon: 'none',
						title: '请选择正确的时间'
					});
					return;
				}
				
				
				this.page=1;
				this.getlist=[];
				this.getlistrequest();
			}else if(this.enddate){
				uni.showToast({
					icon: 'none',
					title: '请选择开始的时间'
				});
			}else if(this.startdate){
				uni.showToast({
					icon: 'none',
					title: '请选择结束的时间'
				});
			}
			
			// vis_state:"",
			// date_t1:"",
			// date_t2:"",
			// this.resultInfo = { ...val };
			// this.isActive = false;
		},
		tabfun(type){
			this.showtype=type;
			if(type=='1'){
				this.vis_state='no';
				
			}else{
				this.vis_state='do'
			}
			// var  date = new Date();//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			// var Y = date.getFullYear() + '-';			 
			// var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';			 
			// var D = (date.getDate() < 10 ? '0'+(date.getDate()) : date.getDate()) + ' ';
			// this.enddate=Y+M+D;
			// this.startdate=Y+M+D;
			
			this.page=1;
			this.getlist=[];
			this.getlistrequest();
			
		},	
		chooseall(){
			this.enddate='';
			this.startdate='';
			
			this.page=1;
			this.getlist=[];
			this.getlistrequest();
		},
		choosedate(type){
			this.datetype=type;
			this.date1visible=true;
		},
		checkstatusclass(e){
			console.log(this.getlist[e])
			
			let iteminfo = this.getlist[e]
			let timestamp = (new Date()).valueOf();
			if(iteminfo.app_visittime<timestamp){
				switch(iteminfo.appointment_status){
					case 1:
					return true
					case 0:
					return true
					default:
					return false
				}
				// return '已逾期';
			}
			switch(iteminfo.status) {
			     case 1:
			        return false;
			        break;
			     case 2:
			        return true;
			        break;
			     case 3:
			        return true;
			        break;
			     default:
			        return true;
			} 
			
		},
		/*检查状态*/
		checkstatus(e){
			console.log(this.getlist[e])
			let iteminfo = this.getlist[e]
			let timestamp = (new Date()).valueOf();
			let app_visittimeon=iteminfo.app_visittime*1000;
			console.log(iteminfo.app_visittime<timestamp)
			if(iteminfo.m_status==0){
				return '待访问';
			}else if(iteminfo.m_status==1){
				return '已访问';
			}else if(iteminfo.m_status==2){
				return '已逾期';
			}else if(iteminfo.m_status==3){
				return '已逾期';
			}else if(iteminfo.m_status==4){
				return '已暂停';
			}else if(iteminfo.m_status==5){
				return '不接受';
			}else if(iteminfo.m_status==6){
				return '已接受';
			}else if(iteminfo.m_status==7){
				return '已审核';
			}else if(iteminfo.m_status==8){
				return '待审核';
			}else if(iteminfo.m_status==9){
				return '审核不过';
			}else if(iteminfo.m_status==10){
				return '待审核';
			}else if(iteminfo.m_status==11){
				return '待确认';
			}else if(iteminfo.m_status==12){
				return '已取消';
			}else if(iteminfo.m_status==13){
				return '待答题';
			}
			
			/*状态判断---*/
			// //先判断总开关
			// switch(iteminfo.appointment_status){
			// 	case 1:
			// 		return '已访问'
			// 	case 2:
			// 		return '已逾期'
			// 	case 3:
			// 		return '逾期完成'
			// }
			// if(iteminfo.auditing==0){
			// 	return '待审核';
			// }else if(iteminfo.auditing==2){
			// 	return '审核不通过'
			// }
			// if(iteminfo.appointment_status == 0 ){
			
			// 	if(iteminfo.meeting_status ==2 || iteminfo.meeting_status ==3){
			// 		switch(iteminfo.arrive_status){
			// 			case 1:
			// 				// return '状态(1-到达，2-保安放行，3-到达指定位置，4-离开，5-保安不接受)'
			// 				return '已到达'
			// 			case 2:
			// 				return '已接受'
			// 			case 3:
			// 				return '访问中'
			// 			case 4:
			// 				return '已到达'
			// 			case 5:
			// 				return '已完成'
			// 		}
			// 	}
				
			// 	if(iteminfo.meeting_status == 1 ){return '已不接受'}
			// }
			// if(iteminfo.app_visittime<timestamp){
			// 	switch(iteminfo.appointment_status){
			// 		case 1:
			// 		return '已访问'
			// 		case 0:
			// 		return '待访问'
			// 		case 4:
			// 		return '已暂停'
			// 		default:
			// 		return '待审核'
			// 	}
			// 	// return '已逾期';
			// }
			// switch(iteminfo.status) {
			//      case 1:
			//         return '已不接受';
			//         break;
			//      case 2:
			//         return '已接受';
			//         break;
			//      case 3:
			//         return '已确认';
			//         break;
			//      default:
			//         return '已完成';
			// } 
		},
		/*下拉刷新的回调*/
			downCallback(){
				this.page=1;
				this.getlist=[];
				this.getlistrequest();
			},
		/*上拉加载的回调*/
			upCallback(page) {
			// this.mescroll.endSuccess(this.getlist.length, this.requestchanger);
				this.getlistrequest()
			},
		getlistrequest(){
			this.page++
			if(this.enddate){
				var enddate1 = new Date(this.enddate);
				var enddate = enddate1.getTime();
				
				var startdate1 = new Date(this.startdate);
				var startdate = startdate1.getTime();
				
				
			}else{
				var enddate='';
				var startdate='';
			}
			
			
			meetinglist({
				yueType:'vister',
				offset:this.getlist.length,
				length:this.pagesize,
				vis_state:this.vis_state,
				app_type:this.choosetype,
				date_t1:startdate,
				date_t2:enddate,
			}).then(res=>{
			for (let i = 0; i < res.data.data.length; i++) {
				this.getlist.push(res.data.data[i])
			}
			this.mescroll.endSuccess(res.data.count,this.requestchanger)
			if(this.getlist.length >= this.count){
				this.requestchanger = false
			}
			})
		},	
		clickBtn(id) {
			let url = '';
			switch (id) {
				case 1:
					url = '../yaoqing/yaoqing';
					break;
				case 2:
					url = '../message/messageList/messageList';
					break;
				case 3:
					url = '../sign/sign';
					break;
				case 4:
					url = '../user/userList';
					break;
				default:
					url = '../main/main';
			}
			uni.navigateTo({
				url: url
			});
		},
		editPwd() {
			// 修改密码
			uni.navigateTo({
				url: '../pwd/pwd'
			});
		},
		bindLogin() {
			uni.navigateTo({
				url: '../login/login'
			});
		},
		bindLogout() {
			this.logout();
			uni.reLaunch({
				url: '../login/login'
			});
		},
		imageError(e) {
			this.userSrc = defaultImg;
		},
		
		timestampTime(timestamp) {
				return timestampToTime(timestamp)
		//         var  date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
		 
		//         var Y = date.getFullYear() + '-';
		 
		//         var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
		 
		//         var D = date.getDate() + ' ';
		 
		//         var h = date.getHours() + ':';
		 
		//         var m = date.getMinutes();
		 
		 
		//         return Y+M+D+h+m;
		 
		    },
			goanswer(item){
				if(this.choosetype=='1'){
					var type='yq'
				}else{
					var type='yy'
				}
				let details = {
					companyid:item.companyid,
					appointmentid:item.appointmentid,
					meeting_code:'',
					type:type						
				}
				uni.reLaunch({
					url:"/pages/subject/problem?details="+encodeURIComponent(JSON.stringify(details))
				});	
			},
		gomeeting_code(item){
			if(item.is_answer==1){
				uni.navigateTo({
				    url: '../yaoqing/InviteQrCode?meeting_code='+item.meeting_code+'&choosetype='+this.choosetype
				});
			}else{
				if(this.choosetype=='1'){
					var type='yq'
				}else{
					var type='yy'
				}
				uni.showModal({
				    title: '请进行相关答题',
				    // content: '这是一个模态弹窗',
				    success: function (res) {
				        if (res.confirm) {
							let details = {
								companyid:item.companyid,
								appointmentid:item.appointmentid,
								meeting_code:item.meeting_code,
								type:type						
							}
							uni.reLaunch({
								url:"/pages/subject/problem?details="+encodeURIComponent(JSON.stringify(details))
							});	
				        } else if (res.cancel) {
							/*bann*/
							return 
				            // console.log('用户点击取消');
				        }
				    }
				});
				
				
			}
			
			
			
		},
		details(index) {
			let goinfo = this.getlist[index]
			console.log(goinfo)			
			
			uni.navigateTo({
			    url: './appointmentDetails?id='+goinfo.appointmentid+'&type='+this.choosetype
			});
		},
		addyaoqing: function(e) {
			
			if(this.member_frequency>0){
				uni.navigateTo({
					url: '/pages/yaoqing/useraddvisitors'
				});	
			}else{
				uni.showModal({
				    title: '积分不足，请问要去充值?',
				    // content: '这是一个模态弹窗',
				    success: function (res) {
				        if (res.confirm) {
							uni.navigateTo({
								url: '/pages/member/umemeber?type=1'
							});	
				            // console.log('用户点击确定');
				        } else if (res.cancel) {
							/*bann*/
							return 
				            // console.log('用户点击取消');
				        }
				    }
				});
			}
			
		},
	}
};
</script>

<style lang="scss">
	page:before {
		width: 100%;
	   height: 100%;
	   content: ' ';
	   position: fixed;
	   z-index: -1;
	   top: 0;
	   left: 0;
	   background: #f5f7f6;
	}
	
	.userbg{
		width:100%;
		height: 100px;
		left:0;
		margin-top: 10.5%;
		position:absolute;
		z-index: -1;
		opacity: 0.8;
	}
.an-user {
	.an-quick {
		display: flex;
		flex-direction: row;

		padding: 15px 15px;
		.an-ico-item {
			width: 25%;
			text-align: center;
			.an-ico-img {
				text-align: center;
				width: 40px;
				height: 40px;
				line-height: 40px;
				margin: 0 auto;
				border-radius: 50%;
				color: #ffffff;
				.iconfont {
					font-size: 21px;
				}
				&.color1 {
					//background-color: #e9f4fd;
					background: linear-gradient(#bb51fb, #883ffe);
				}
				&.color2 {
					background: linear-gradient(#f9ac8e, #ec5e5c);
				}
				&.color3 {
					background: linear-gradient(#78f5b1, #34ce78);
				}
				&.color4 {
					background: linear-gradient(#68aefb, #007aff);
				}
			}
		}
	}
	.an-list {
		.an-ico {
			margin-right: 10px;
			.iconfont {
				font-size: 21px;
			}
			&.color1 {
				color: #ec5e5c;
			}
			&.color2 {
				color: #883ffe;
			}
			&.color3 {
				color: #34ce78;
			}
			&.color4 {
				color: #007aff;
			}
		}
	}
}
.uni-list-cell-divider{
	    background-color: white;
}
.an-top-bg{
	height: auto;
	padding: 0px 0px 0px 0px;
}
	
uni-button{
	width: 80px;
	height: 30px;
	font-size: 15px;
	line-height: 30px;
}
.cc{
	background: #007aff;
	color: white;
	margin-right: 10px;
	float: right;
	width: auto;
}
.cc2{
	background: #ED6C19;
	color: white;
	margin-right: 10px;
	float: right;
	width: 100px;
}
.an-userInfo{
	background: white;
	padding-top: 10px;
	padding-right: 20upx;
}
.an-user-text1{
	margin-top: 5px;
	left: 19%;
}
.an-user image{
	border-radius:50% ;
}
.an-user-text{
	margin-top: 5px;
}
.cc-view{
	text-align: right;
	margin-top: 5px;
	.cc-icon{
		position: absolute;
		display: inline-block;
		height:100px;
		width: 100px;
		top: 10%;
		right: 0;
		opacity: 0.4;
		text{
				text-align: center;
			    position: relative;
			    display: block;
			    top: -74px;
			    // rotate: -30deg;
				transform:rotate(-30deg);
				-ms-transform:rotate(-30deg); 	/* IE 9 */
				-moz-transform:rotate(-30deg); 	/* Firefox */
				-webkit-transform:rotate(-30deg); /* Safari 和 Chrome */
				-o-transform:rotate(-30deg); 	/* Opera */
				
				font-size: 14px;
				letter-spacing:8px;
				font-weight: bold;
				// opacity: 0.6;
		}
	}
	.cc-icon-del {
		background: url(../../static/img/status1.png) no-repeat;
		background-size: 100%,100%;
	    height:100%;
	    width:100%;
	    display: inline-block;
	}
	.cc-icon >.cc-icon-del {
	  filter: drop-shadow(-10px 0 #007aff); 
	  position: relative;
	  // left: -20px;
	 }
	.cc-status{
		width: 100px;
		height: 100px;
		background: url(../../static/img/status1.png);
		background-size: 100%,100%;
		p{
			
		}
	}
}

.an-user-text1{
	position: relative;
	width: 80%;
	// margin-bottom: 10px;
}
.cc-success-status{
	color:#007aff;
}
.cc-faild-status{
	color:#f33a3a;
}
.cc-wrong-status{
	color: #ED6C19;
}
.btnapprow{position: fixed;bottom: 42px;left: 0px;width: 100%;    z-index: 999;}
.btnapprow .btn-row{background: #fff;width: 80%;margin: 0 auto;padding-bottom: 10px;padding-top: 10px;}
.btnapprow uni-button{width: 100%;height:auto;line-height: 2.5rem;}
.an-index-grid {
		display: flex;
		flex-direction: row; //主轴方向
		flex-wrap: wrap; //换行
		justify-content: space-between; //主轴上的对齐方式
	}
	.an-index-grid2 {
			display: flex;
			flex-direction: row; //主轴方向
			flex-wrap: wrap; //换行
		}
.topnavfeer{position: absolute;z-index: 999;top: 0;}	
.topnavfeer .tablist{border-top: 0.5px solid #c8c7cc;border-bottom: 0.5px solid #c8c7cc;}
.topnavfeer .tabshow .on{border-bottom: 2px solid #ED6C19;}

</style>
